<template>
  <div>
    <div class="car-area list bg">
      <div class="container">
        <div class="row">
          <div class="col-lg-3">
            <div class="car-sidebar">
              <div class="car-widget">
                <div class="car-search-form">
                  <h4 class="car-widget-title">搜索</h4>
                  <form action="javascript:;">
                    <div class="form-group">
                      <input type="text" class="form-control" placeholder="請輸入搜索内容">
                      <button type="search"><i class="far fa-search"></i></button>
                    </div>
                  </form>
                </div>
              </div>
              <div class="car-widget">
                <h4 class="car-widget-title">品牌</h4>
                <ul>
                  <li>
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" id="brand">
                      <label class="form-check-label" for="brand"> 全部品牌</label>
                    </div>
                  </li>
                  <li>
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" id="brand1">
                      <label class="form-check-label" for="brand1"> 寶馬</label>
                    </div>
                  </li>
                  <li>
                    <div class="form-check">
                      <input class="form-check-input" checked="" type="checkbox" id="brand2">
                      <label class="form-check-label" for="brand2"> 豐田</label>
                    </div>
                  </li>
                  <li>
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" id="brand3">
                      <label class="form-check-label" for="brand3"> 法拉利</label>
                    </div>
                  </li>
                  <li>
                    <div class="form-check">
                      <input class="form-check-input" checked="" type="checkbox" id="brand4">
                      <label class="form-check-label" for="brand4"> 奧迪</label>
                    </div>
                  </li>
                  <li>
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" id="brand5">
                      <label class="form-check-label" for="brand5"> 特斯拉</label>
                    </div>
                  </li>
                  <li>
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" id="brand6">
                      <label class="form-check-label" for="brand6"> 梅賽德斯</label>
                    </div>
                  </li>
                  <li>
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" id="brand7">
                      <label class="form-check-label" for="brand7"> 現代</label>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="car-widget">
                <h4 class="car-widget-title">價格範圍</h4>
                <div class="price-range-box">
                  <div class="price-range-input">
                    <input type="text" id="price-amount" readonly="">
                  </div>
                  <div class="price-range"></div>
                </div>
              </div>
              <div class="car-widget">
                <h4 class="car-widget-title">變速器</h4>
                <ul>
                  <li>
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" id="tran1">
                      <label class="form-check-label" for="tran1"> 自動</label>
                    </div>
                  </li>
                  <li>
                    <div class="form-check">
                      <input class="form-check-input" checked="" type="checkbox" id="tran2">
                      <label class="form-check-label" for="tran2"> 手動</label>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="car-widget">
                <h4 class="car-widget-title">燃料類型</h4>
                <ul>
                  <li>
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" id="fuel1">
                      <label class="form-check-label" for="fuel1"> 氣體</label>
                    </div>
                  </li>
                  <li>
                    <div class="form-check">
                      <input class="form-check-input" checked="" type="checkbox" id="fuel2">
                      <label class="form-check-label" for="fuel2"> 混合動力</label>
                    </div>
                  </li>
                  <li>
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" id="fuel3">
                      <label class="form-check-label" for="fuel3"> 埰油</label>
                    </div>
                  </li>
                  <li>
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" id="fuel4">
                      <label class="form-check-label" for="fuel4"> 電動</label>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="car-widget">
                <h4 class="car-widget-title">特點</h4>
                <ul>
                  <li>
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" id="feature1">
                      <label class="form-check-label" for="feature1"> 安全氣囊 - 駕駛員</label>
                    </div>
                  </li>
                  <li>
                    <div class="form-check">
                      <input class="form-check-input" checked="" type="checkbox" id="feature2">
                      <label class="form-check-label" for="feature2"> 安全氣囊 - 乘客</label>
                    </div>
                  </li>
                  <li>
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" id="feature3">
                      <label class="form-check-label" for="feature3"> 合金輪轂</label>
                    </div>
                  </li>
                  <li>
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" id="feature4">
                      <label class="form-check-label" for="feature4"> 防抱死制動系統</label>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="col-lg-9">
            <div class="col-md-12">
              <div class="car-sort">
                <h6>正在顯示第 1 - 10 個，共 50 個結果</h6>
                <!-- <div class="car-sort-list-grid">
                  <a class="car-sort-grid" href="listing-grid.html"><i class="far fa-grid-2"></i></a>
                  <a class="car-sort-list active" href=""><i class="far fa-list-ul"></i></a>
                </div> -->
                <div class="col-md-3 car-sort-box">
                  <select class="select">
                    <option value="1">默認排序</option>
                    <option value="5">最新發佈</option>
                    <option value="2">最後發佈</option>
                    <option value="3">價格最低</option>
                    <option value="4">價格最高</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6 col-lg-12">
                <div class="car-item">
                  <div class="car-img">
                    <!-- <span class="car-status status-1">Used</span> -->
                    <img src="~/static/picture/01.jpg" alt="">
                    <div class="car-btns">
                      <a href="#"><i class="far fa-heart"></i></a>
                    </div>
                  </div>
                  <div class="car-content">
                    <div class="car-top">
                      <h4><a href="#">Mercedes Benz Car</a></h4>
                      <div class="car-rate">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <span>5.0 (58.5k Review)</span>
                      </div>
                    </div>
                    <ul class="car-list">
                      <li><i class="far fa-steering-wheel"></i>轎車</li>
                      <li><i class="far fa-road"></i>表顯里程8萬公里</li>
                      <li><i class="far fa-car"></i>2022年上牌</li>
                      <li><i class="far fa-gas-pump"></i>過戶 3次</li>
                    </ul>
                    <p>
                      一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介
                    </p>
                    <div class="car-footer">
                      <span class="car-price car-price-custom">HK 45,620</span>
                      <a href="/car-datail" class="theme-btn car-item-check-button">查看詳細車況</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-6 col-lg-12">
                <div class="car-item">
                  <div class="car-img">
                    <img src="~/static/picture/02.jpg" alt="">
                    <div class="car-btns">
                      <a href="#"><i class="far fa-heart"></i></a>
                    </div>
                  </div>
                  <div class="car-content">
                    <div class="car-top">
                      <h4><a href="#">Yellow Ferrari 458</a></h4>
                      <div class="car-rate">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <span>5.0 (58.5k Review)</span>
                      </div>
                    </div>
                    <ul class="car-list">
                      <li><i class="far fa-steering-wheel"></i>轎車</li>
                      <li><i class="far fa-road"></i>表顯里程8萬公里</li>
                      <li><i class="far fa-car"></i>2022年上牌</li>
                      <li><i class="far fa-gas-pump"></i>過戶 3次</li>
                    </ul>
                    <p>
                      一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介
                    </p>
                    <div class="car-footer">
                      <span class="car-price car-price-custom">HK 90,250</span>
                      <a href="/car-datail" class="theme-btn car-item-check-button">查看詳細車況</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-6 col-lg-12">
                <div class="car-item">
                  <div class="car-img">
                    <img src="~/static/picture/03.jpg" alt="">
                    <div class="car-btns">
                      <a href="#"><i class="far fa-heart"></i></a>
                    </div>
                  </div>
                  <div class="car-content">
                    <div class="car-top">
                      <h4><a href="#">Black Audi Q7</a></h4>
                      <div class="car-rate">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <span>5.0 (58.5k Review)</span>
                      </div>
                    </div>
                    <ul class="car-list">
                      <li><i class="far fa-steering-wheel"></i>轎車</li>
                      <li><i class="far fa-road"></i>表顯里程8萬公里</li>
                      <li><i class="far fa-car"></i>2022年上牌</li>
                      <li><i class="far fa-gas-pump"></i>過戶 3次</li>
                    </ul>
                    <p>
                      一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介
                    </p>
                    <div class="car-footer">
                      <span class="car-price car-price-custom">HK 44,350</span>
                      <a href="/car-datail" class="theme-btn car-item-check-button">查看詳細車況</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-6 col-lg-12">
                <div class="car-item">
                  <div class="car-img">
                    <span class="car-status status-2">特價</span>
                    <img src="~/static/picture/04.jpg" alt="">
                    <div class="car-btns">
                      <a href="#"><i class="far fa-heart"></i></a>
                    </div>
                  </div>
                  <div class="car-content">
                    <div class="car-top">
                      <h4><a href="#">BMW Sports Car</a></h4>
                      <div class="car-rate">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <span>5.0 (58.5k Review)</span>
                      </div>
                    </div>
                    <ul class="car-list">
                      <li><i class="far fa-steering-wheel"></i>轎車</li>
                      <li><i class="far fa-road"></i>表顯里程8萬公里</li>
                      <li><i class="far fa-car"></i>2022年上牌</li>
                      <li><i class="far fa-gas-pump"></i>過戶 3次</li>
                    </ul>
                    <p>
                      一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介
                    </p>
                    <div class="car-footer">
                      <span class="car-price car-price-custom">HK78,760</span>
                      <a href="/car-datail" class="theme-btn car-item-check-button">查看詳細車況</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-6 col-lg-12">
                <div class="car-item">
                  <div class="car-img">
                    <!-- <span class="car-status status-1">Used</span> -->
                    <img src="~/static/picture/05.jpg" alt="">
                    <div class="car-btns">
                      <a href="#"><i class="far fa-heart"></i></a>
                    </div>
                  </div>
                  <div class="car-content">
                    <div class="car-top">
                      <h4><a href="#">White Tesla Car</a></h4>
                      <div class="car-rate">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <span>5.0 (58.5k Review)</span>
                      </div>
                    </div>
                    <ul class="car-list">
                      <li><i class="far fa-steering-wheel"></i>轎車</li>
                      <li><i class="far fa-road"></i>表顯里程8萬公里</li>
                      <li><i class="far fa-car"></i>2022年上牌</li>
                      <li><i class="far fa-gas-pump"></i>過戶 3次</li>
                    </ul>
                    <p>
                      一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介
                    </p>
                    <div class="car-footer">
                      <span class="car-price car-price-custom">HK 64,230</span>
                      <a href="/car-datail" class="theme-btn car-item-check-button">查看詳細車況</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-6 col-lg-12">
                <div class="car-item">
                  <div class="car-img">
                    <span class="car-status status-2">特價</span>
                    <img src="~/static/picture/06.jpg" alt="">
                    <div class="car-btns">
                      <a href="#"><i class="far fa-heart"></i></a>
                    </div>
                  </div>
                  <div class="car-content">
                    <div class="car-top">
                      <h4><a href="#">White Nissan Car</a></h4>
                      <div class="car-rate">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <span>5.0 (58.5k Review)</span>
                      </div>
                    </div>
                    <ul class="car-list">
                      <li><i class="far fa-steering-wheel"></i>轎車</li>
                      <li><i class="far fa-road"></i>表顯里程8萬公里</li>
                      <li><i class="far fa-car"></i>2022年上牌</li>
                      <li><i class="far fa-gas-pump"></i>過戶 3次</li>
                    </ul>
                    <p>
                      一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介
                    </p>
                    <div class="car-footer">
                      <span class="car-price car-price-custom">HK 34,540</span>
                      <a href="/car-datail" class="theme-btn car-item-check-button">查看詳細車況</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-6 col-lg-12">
                <div class="car-item">
                  <div class="car-img">
                    <img src="~/static/picture/07.jpg" alt="">
                    <div class="car-btns">
                      <a href="#"><i class="far fa-heart"></i></a>
                    </div>
                  </div>
                  <div class="car-content">
                    <div class="car-top">
                      <h4><a href="#">Mercedes Benz Suv</a></h4>
                      <div class="car-rate">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <span>5.0 (58.5k Review)</span>
                      </div>
                    </div>
                    <ul class="car-list">
                      <li><i class="far fa-steering-wheel"></i>轎車</li>
                      <li><i class="far fa-road"></i>表顯里程8萬公里</li>
                      <li><i class="far fa-car"></i>2022年上牌</li>
                      <li><i class="far fa-gas-pump"></i>過戶 3次</li>
                    </ul>
                    <p>
                      一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介
                    </p>
                    <div class="car-footer">
                      <span class="car-price car-price-custom">HK 75,820</span>
                      <a href="/car-datail" class="theme-btn car-item-check-button">查看詳細車況</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-6 col-lg-12">
                <div class="car-item">
                  <div class="car-img">
                    <img src="~/static/picture/08.jpg" alt="">
                    <div class="car-btns">
                      <a href="#"><i class="far fa-heart"></i></a>
                    </div>
                  </div>
                  <div class="car-content">
                    <div class="car-top">
                      <h4><a href="#">Red Hyundai Car</a></h4>
                      <div class="car-rate">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <span>5.0 (58.5k Review)</span>
                      </div>
                    </div>
                    <ul class="car-list">
                      <li><i class="far fa-steering-wheel"></i>轎車</li>
                      <li><i class="far fa-road"></i>表顯里程8萬公里</li>
                      <li><i class="far fa-car"></i>2022年上牌</li>
                      <li><i class="far fa-gas-pump"></i>過戶 3次</li>
                    </ul>
                    <p>
                      一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介
                    </p>
                    <div class="car-footer">
                      <span class="car-price car-price-custom">HK 25,620</span>
                      <a href="/car-datail" class="theme-btn car-item-check-button">查看詳細車況</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-6 col-lg-12">
                <div class="car-item">
                  <div class="car-img">
                    <img src="~/static/picture/09.jpg" alt="">
                    <div class="car-btns">
                      <a href="#"><i class="far fa-heart"></i></a>
                    </div>
                  </div>
                  <div class="car-content">
                    <div class="car-top">
                      <h4><a href="#">White BMW Car</a></h4>
                      <div class="car-rate">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <span>5.0 (58.5k Review)</span>
                      </div>
                    </div>
                    <ul class="car-list">
                      <li><i class="far fa-steering-wheel"></i>轎車</li>
                      <li><i class="far fa-road"></i>表顯里程8萬公里</li>
                      <li><i class="far fa-car"></i>2022年上牌</li>
                      <li><i class="far fa-gas-pump"></i>過戶 3次</li>
                    </ul>
                    <p>
                      一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介，一段説明簡介
                    </p>
                    <div class="car-footer">
                      <span class="car-price car-price-custom">HK 22,620</span>
                      <a href="/car-datail" class="theme-btn car-item-check-button">查看詳細車況</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="pagination-area">
              <div aria-label="Page navigation example">
                <ul class="pagination">
                  <li class="page-item">
                    <a class="page-link" href="#" aria-label="Previous">
                      <span aria-hidden="true"><i class="far fa-arrow-left"></i></span>
                    </a>
                  </li>
                  <li class="page-item active"><a class="page-link" href="#">1</a></li>
                  <li class="page-item"><a class="page-link" href="#">2</a></li>
                  <li class="page-item"><a class="page-link" href="#">3</a></li>
                  <li class="page-item">
                    <a class="page-link" href="#" aria-label="Next">
                      <span aria-hidden="true"><i class="far fa-arrow-right"></i></span>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ListPage',
  layout: 'reception'
}
</script>